<template>
  <el-row :gutter="10" justify="end" type="flex" class="text-right">
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <div class="my-clock-bg">
        <FlipClock class="my-clock"></FlipClock>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import FlipClock from 'kuan-vue-flip-clock'
// import { mapState } from 'vuex'

export default {
  name: 'timeIndex',

  components: {
    FlipClock
  },

  // computed: {
  //   ...mapState({
  //     type: (state) => state.common.type,
  //     userType: (state) => state.common.userType
  //   })
  // },

  // mounted() {
  //   console.log(this.type, this.userType)
  // }
}
</script>

<style scoped lang="scss">
.my-clock-bg {
  background: #0f3854;
  background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;
  text-align: center;

}

.my-clock {
  height: calc(100vh - 1.68rem);
  line-height: 11.5rem;
  .flip {
    height: 0.24rem !important;
    width: 0.18rem !important;
    font-size: 0.16rem !important;
    line-height: 0.24rem !important;
    margin-left: 0.2rem !important;

    .inn {
      color: #fff !important;
      text-shadow: 0 1px 2px #000 !important;
      background-color: #46c9c6 !important;
      border-radius: 4px !important;
    }

    .item .up:after {
      content: '';
      position: absolute;
      top: 0.12rem;
      left: 0;
      z-index: 99;
      width: 100%;
      height: 3px;
      background-color: rgb(9, 29, 29) !important;

    }

    // .shadow {
    //   width: auto !important;
    // }
  }

  .colon {
    height: 0.16rem !important;
    padding: 0 0.05rem !important;

    &::after {
      content: '';
      display: block;
      width: 0.03rem !important;
      height: 0.03rem !important;
      background: #46c9c6;
      border-radius: 50%;
    }

    &::before {
      content: '';
      display: block;
      width: 0.03rem !important;
      height: 0.03rem !important;
      background: #46c9c6;
      border-radius: 50%;
    }
  }
}

.clock-container {
  justify-content: center;
}
</style>
